<template>
  <div class="box">
    <el-form ref="userForm" :model="forms" :rules="userRules" :label-position="labelPosition" label-width="100px">
      <el-form-item prop="name" label="用户账号">
        <span style="margin-right: 5px;">{{ forms.name }}</span>
        <el-button v-if="type == 'add'" type="text" @click="showUser = true">选择</el-button>
      </el-form-item>
      <el-form-item prop="p_name" label="上级用户">
        <span style="margin-right: 5px;">{{ forms.p_name || '总店' }}</span>
        <el-button type="text" @click="showAgent = true">选择</el-button>
      </el-form-item>
      <el-form-item prop="mobile" label="联系号码">
        <!-- <span>{{forms.mobile}}</span> -->
        <el-input v-model="forms.mobile"></el-input>
      </el-form-item>
      <!--    <el-form-item label="用户状态">
        <el-radio-group v-model="forms.status">
          <el-radio :label="1">启用</el-radio>
          <el-radio :label="0">禁用</el-radio>
        </el-radio-group>
      </el-form-item> -->
      <el-form-item prop="grade_id" label="等级">
        <el-select v-model="forms.grade_id" placeholder="请选择"><el-option v-for="item in gradelist" :key="item.id" :label="item.name" :value="item.id"></el-option></el-select>
      </el-form-item>
      <el-form-item>
        <el-button size="medium" @click="addSave" v-if="type == 'add' || type == 'apply'">确定</el-button>
        <el-button size="medium" @click="editSave" v-else>确定</el-button>
      </el-form-item>
    </el-form>
    <el-dialog title="选择用户" :visible.sync="showUser" width="60%" append-to-body>
      <SelectUser @outData="getuser" :hidden="true" :data="userlist" :limit="1"></SelectUser>
    </el-dialog>
    <el-dialog title="选择分销商" :visible.sync="showAgent" width="60%" append-to-body>
      <SelectAgent @outData="getagent" :hidden="false" :data="agentlist" :limit="1"></SelectAgent>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showAgent = false">取 消</el-button>
        <el-button type="primary" @click="getagent">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {mapGetters} from 'vuex';
import {saveagent, editagent, getagentdetail, agent_gradelist} from '@/api/mall/agent';
import {objextend} from '@/utils/index';
import SelectUser from '@/components/SelectUser/index';
import SelectAgent from '@/components/SelectAgent/index';
export default {
  name: 'Edituser',
  data() {
    const validateMobile = (rule, value, callback) => {
      if (!/^1[3456789]\d{9}$/.test(value)) {
        callback(new Error('手机号码有误，请重填'));
      } else {
        callback();
      }
    };
    return {
      labelPosition: 'left',
      showUser: false,
      showAgent: false,
      forms: {
        user_id: '',
        name: '',
        p_name: '',
        pid: '',
        mobile: '',
        status: 1,
        grade_id: 0
      },
      state: '',
      loading: false,
      userlist: [],
      agentlist: [],
      gradelist: [],
      userRules: {
        name: [
          {
            required: true,
            trigger: 'change',
            message: '请选择用户'
          }
        ],
        mobile: [
          {
            required: true,
            trigger: 'blur',
            validator: validateMobile
          }
        ]
      }
    };
  },
  props: {
    type: {
      type: String,
      default: 'add'
    },
    id: {
      type: Number,
      default: -1
    },
    data: {
      type: Object,
      default: function() {
        return {};
      }
    }
  },
  computed: {
    ...mapGetters(['allroleslist'])
  },
  // watch: {
  //   id() {
  //     this.forms = {
  //       user_id: '',
  //       name: '',
  //       pid: '',
  //       p_name: '',
  //       mobile: '',
  //       status: 1
  //     };
  //     this.userlist = [];
  //     this.agentlist = [];
  //     this.getlist();
  //   }
  // },
  components: {
    SelectUser,
    SelectAgent
  },
  methods: {
    agent_gradelist() {
      let data = {
        page: 1,
        size: 10
      };
      agent_gradelist(data).then(res => {
        this.gradelist = res.msg;
        this.gradelist.unshift({id: 0, name: '默认'});
      });
    },
    getuser(data) {
      if (data && data.length > 0) {
        this.forms.user_id = data[0].id;
        this.forms.name = data[0].nickname;
        this.forms.mobile = data[0].mobile;
        // this.userlist=data
      }
      this.showUser = false;
    },
    getagent() {
      if (this.agentlist && this.agentlist.length > 0) {
        this.forms.pid = this.agentlist[0].id;
        this.forms.p_name = this.agentlist[0].nickname;
      }
      this.showAgent = false;
    },
    getapply(data) {
      this.forms = objextend(this.forms, data);
      this.forms.status = 1;
    },
    getlist(id) {
      var data = {
        id: id
      };
      getagentdetail(data).then(res => {
        var jsondata = res.msg;

        this.userlist.push({
          id: jsondata.user_id
        });
        this.agentlist.push({
          id: jsondata.pid
        });
        this.forms = objextend(this.forms, jsondata);
        this.forms.id = jsondata.id;
        this.forms.update_time = jsondata.update_time;
      });
    },
    addSave() {
      var _this = this;
      this.$refs.userForm.validate(valid => {
        if (valid) {
          var data = _this.forms;

          //额外对上级用户数据进行处理
          delete data.p_name;
          if (data.pid == '') {
            data.pid = 0;
          }

          if (this.type == 'apply') {
            data.apply_id = this.data.id;
            data.update_time = this.data.update_time;
          }
          saveagent(data).then(res => {
            _this.close();
          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    editSave() {
      var _this = this;
      this.$refs.userForm.validate(valid => {
        if (valid) {
          var data = _this.forms;

          //额外对上级用户数据进行处理
          delete data.p_name;
          if (data.pid == '') {
            data.pid = 0;
          }

          editagent(data).then(res => {
            _this.close();
          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    close() {
      this.forms = {
        user_id: '',
        name: '',
        pid: '',
        p_name: '',
        mobile: '',
        status: 1
      };
      // this.uid=''
      this.$emit('on-close');
    },
    handleSelect_uid(item) {
      this.forms.mobile = item.mobile;
      this.forms.user_id = item.id;
    },
    handleSelect_pid(item) {
      this.forms.pid = item.id;
    },
    handleIconClick(ev) {
      console.log(ev);
    }
  },
  mounted() {
    this.userlist = [];
    this.agentlist = [];
    this.agent_gradelist();
    // if (this.type == 'apply') {
    //   this.forms = objextend(this.forms, this.data);
    //   this.forms.status = 1;
    // }
    // if (this.id) {
    //   this.getlist();
    // }
  }
};
</script>

<style scoped>
.el-input {
  width: 270px;
}

.box {
  width: 100%;
  /*padding: 60px;
    height: calc(100vh - 77px);
    overflow: scroll;*/
}
</style>
<style lang="scss">
.my-autocomplete {
  li {
    line-height: normal;
    padding: 7px;

    .name {
      text-overflow: ellipsis;
      overflow: hidden;
    }

    .addr {
      font-size: 12px;
      color: #b4b4b4;
      display: block;
    }

    .highlighted .addr {
      color: #ddd;
    }
  }
}
</style>
